@import './abstracts/variable';
@import './abstracts/mixin';
@import './common/transition.scss';
@import './icon.scss';

@mixin tag-type-style ($normalColor) {
  background: $normalColor;
  border: 1px solid transparent;

  @include when(plain) {
    background: transparent;
    color: $normalColor;
    border-color: $normalColor;
  }
}
@include b(tag) {
  display: inline-block;
  padding: $-tag-medium-padding;
  color: #fff;
  border-radius: 2px;
  font-size: 0;
  transition: opacity .3s;
  -webkit-tap-highlight-color: transparent;

  @include tag-type-style($-tag-info-color);

  @include when(primary) {
    @include tag-type-style($-tag-primary-color);
  }
  @include when(danger) {
    @include tag-type-style($-tag-danger-color);
  }
  @include when(warning) {
    @include tag-type-style($-tag-warning-color);
  }
  @include when(success) {
    @include tag-type-style($-tag-success-color);
  }
  @include e(icon) {
    display: inline-block;
    margin-right: 3px;
    margin-top: 1px;
    font-size: $-tag-small-fs;
    line-height: 1;
    vertical-align: middle;
  }
  @include e(text) {
    display: inline-block;
    font-size: $-tag-fs;
    line-height: 1.43;
    vertical-align: middle;
  }
  @include e(add-text) {
    width: 55px;
    display: inline-block;
    font-size: $-tag-fs;
    vertical-align: middle;
    outline: none;
    border: none;
  }
  @include e(close) {
    display: inline-block;
    margin-left: 10px;
    font-size: $-tag-close-size;
    vertical-align: middle;
    color: $-tag-close-color;
  }

  @include when(small) {
    .wd-tag__text {
      font-size: $-tag-small-fs;
    }
    .wd-tag__add-text {
      font-size: $-tag-small-fs;
    }
    .wd-tag__close {
      transform: translateY(1px);
      margin-left: 4px;
      font-size: $-tag-fs;
    }
  }
  @include when(large) {
    padding: $-tag-large-padding;

    .wd-tag__close {
      margin-left: 18px;
    }
  }
}